<template>
  <div class="screen">
    <iframe
      class="ifr"
      :style="timeshow ? 'width:1px;height:1px;' : 'width:100%;height:100vh;'"
      :src="iframeurl"
      frameborder="0"
      allowfullscreen="true"
    ></iframe>
    <img
      :src="likeStyle(loadimg)"
      alt=""
      id="load"
      class="load"
      v-if="timeshow"
    />
    <img src="../../assets/eupsun.png" alt="" class="logo" v-if="timeshow" />
    <div class="background"></div>
  </div>
</template>
 
<script lang="ts" setup>

import loadimg from "../../assets/load.gif"
import { Md5 } from "ts-md5";
import {
  defineComponent,
  reactive,
  watch,
  ref,
  onMounted,
  onDeactivated,
  computed,
  nextTick
} from "vue";
let timeshow = ref(true);
onMounted(() => {
  // progressFun();
});
nextTick(()=>{
  progressFun()
})


var myDate = new Date();
let iframeurl = ref("");
let md5: any = new Md5();
let date = myDate.getTime();
let token = "18102627699" + "cx2022" + `${date}`;
md5.appendAsciiStr(token)
let aaa  = md5.end()
iframeurl.value = `https://edata.edtzk.com/de1d0zzrc34c/?name=18102627699&timeStamp=${date}&token=${aaa}`

let likeStyle = computed(() => {
  return value => {
    return value + '?' + Math.random()
  }
 
})

onDeactivated(() => {
  timeshow.value = false;
  var self = document.getElementById("load");
  //获取自身节点的父节点
  var parent = self.parentElement;
  //删除节点
  parent.removeChild(self);
  console.log(document.getElementById("load"))
});
const progressFun = () => {
  window.setTimeout(() => {
    timeshow.value = false;
  }, 8000);
};

const getimg = () => {
  let date = new Date().getTime();
  return ``;
};
</script>

<style scoped>
.screen {
  height: 100vh;
  position: relative;
  /* background: #080c24; */
  overflow: hidden;
}
.ifr {
  width: 100%;
  height: calc(100vh);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
.background {
  position: absolute;
  top: 0%;
  height: 100vh;
  width: 100%;
  left: 0%;
  background: #00103c;
  z-index: 97;
}
.load {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 98;
}

.progress {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  display: inline-block;
  position: relative;
}
img {
  position: absolute;
  top: -455%;
  width: 100%;
  height: 100%;
}
.g-container {
  width: 448px;
  height: 30px;
  border-radius: 40px;
  border: 2px solid #acb0b2;
  box-sizing: border-box;
  padding: 0 2px;
  margin-bottom: 10px;
}

.g-progress {
  display: inline-block;

  height: calc(100% - 4px);
  margin: 2px 1px;
  background: #1cf5f1;
  border-radius: 2px;
}
.anmain {
  animation: myfirst 0.5s;
  -moz-animation: myfirst 0.5s; /* Firefox */
  -webkit-animation: myfirst 0.5s; /* Safari and Chrome */
  -o-animation: myfirst 0.5s; /* Opera */
  animation-fill-mode: forwards;
}
.g-progress:nth-child(1) {
  border-radius: 30px 2px 2px 30px;
}
.g-progress:nth-child(10) {
  border-radius: 2px 30px 30px 2px;
}
p {
  color: #14faf680;
  text-align: center;
  font-size: 18px;
}
p:nth-child(1) {
  margin-bottom: 10px;
}
span {
  color: #14faf680;
  text-align: center;
  font-size: 18px;
  display: inline-block;
  width: 100%;
}

@keyframes myfirst {
  from {
    width: 0;
  }
  to {
    width: 42px;
  }
}

@-webkit-keyframes myfirst /* Safari 与 Chrome */ {
  from {
    width: 0;
  }
  to {
    width: 42px;
  }
}
.fillWidth {
  width: 50%;
  height: 50%;
  object-fit: fill;
  position: absolute;
  top: 20%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%);
}
.load {
  position: absolute;
  top: 30%;
  left: 50%;
  z-index: 98;
  width: 420px;
  height: 460px;
  transform: translate(-50%);
}
.logo {
  height: 65px;
  width: 200px;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 98;
}
</style>
